<template>
	<div class="box">
		<!-- 头部搜索模块 -->
		<headerSearch 
      :selectObj="selectObject" 
      :goSearchFc="searchClick" 
      :buttonList="buttonList"
    />
		<!-- 中间表格模块 -->
        <BaseTable
            :data="cargotableData"
            :columns="cargotableDataColumns"
            :tableHeight="tableHeight"
            :pagination="false"
            :loading="loading"
            @details="tableClick"
        ></BaseTable>

		<div class="page">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryAll.startpage"
				:page-sizes="[10, 15, 20, 25, 30]"
				:page-size="queryAll.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
			></el-pagination>
		</div>


		<!-- 审核 -->
		<el-drawer
			:before-close="handleClose"
			title="货权操作"
			:visible.sync="drawerCargo"
			direction="rtl"
			size="50%"
      @close="closeDrawer"
		>
      <detail 
        ref="detail" :customerData="customerData"
      />
			<div class="demo-drawer__footer">
        <el-button size="mini" @click="drawerCargo = false">取消</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script>
import Utils from '@/libs/Utils.js'
import BaseTable from '@/components/BaseTable'
import api from '@/api/Business/issuingCompany'
import publicapi from '@/api/public'
import headerSearch from '@/components/headerSearch'
import detail from './detail.vue'
export default {
  name: 'issuingCompany',
  components: {
    BaseTable,
    headerSearch,
    detail
  },
  data() {
    return {
      // 搜索框显示对象
      selectObject: [
        {
          name: '船名航次',
          type: 'select',
          modelName: 'shipvoyageId',
          selectData: [],
          selectLabel: 'shipvoyageName',
          selectValue: 'shipvoyageId'
        },
        {
          name: '提单号',
          type: 'input',
          modelName: 'billNo'
        },
        {
          name: '货主',
          type: 'select',
          modelName: 'cargoOwnerId',
          selectData: [],
          selectLabel: 'customerName',
          selectValue: 'customerId'
        }
      ],
      // header的按钮list
      buttonList: [
        { label: '货权管理', type: 'primary', icon: '', disabled: true, click: () => this.cargoManage, permission: 'businessManagement:IssuingCompany:cargo' }
      ],
      cargotableDataColumns: [ // table表头
        { prop: 'shipvoyageName', label: '航次' },
        { prop: 'billNo', label: '提单号' },
        { prop: 'cargoOwnerName', label: '货主', isShort: true },
        { prop: 'issuingCompanyName', label: '开证公司', isShort: true },
        { prop: 'billQuantity', label: '提单数' },
        { prop: 'billVolume', label: '提单体积' },
        { prop: 'inQuantity', label: '入库数A' },
        { prop: 'transferQuantity', label: '货权转让数B' },
        { prop: 'releaseQuantity', label: '发货数C' },
        { prop: 'release', label: '放货数D' },
        { prop: 'unreleaseQuantity', label: '未放货数A-B' },
        { prop: 'untransferQuantity', label: '剩余货权数B-C' },
        { prop: 'unrelease', label: '剩余放货数B-D' },
        { prop: 'uninQuantity', label: '场存A-C' }
      ],
      cargotableData: [],
      activeName: 'first',
      loading: false,
      queryAll: {
        startpage: 1,
        pagesize: 10
      },
      totalNum: 0,
      drawerCargo: false,
      clickRow: {},
      customerData: [] // 货主货代开证公司
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 40
    }
  },
  created() {
    this.getCustomer()
    this.getShipvoyage()
  },
  methods: {
    /**
     * 获取开证公司数据
     */
    async getIssuingCargoTransfer() {
      this.loading = true
      await api
        .reqGetIssuingCargoTransfer(this.queryAll)
        .then(res => {
          this.loading = false
          this.buttonList[0].disabled = true
          this.cargotableData = res.data.data.pages
          this.queryAll.startpage = res.data.data.pageNum
          this.queryAll.pagesize = res.data.data.pageSize
          this.totalNum = res.data.data.totalNum
        })
        .catch(() => {})
    },

    /**
     * 打开货权管理抽屉
     */
    async cargoManage() {
      this.drawerCargo = true
      this.$nextTick(() => {
        this.$refs.detail.tableData = []
        this.$refs.detail.quantity = 0
        this.$refs.detail.ton = 0
        this.$refs.detail.volume = 0
        this.$refs.detail.clickRow = this.clickRow
        this.$refs.detail.formData = this.clickRow
        api.reqGetBillRemark(this.clickRow.cargoInfoId).then(res => {
          this.$refs.detail.remark = res.data.data.remark
        })
      })
    },
    closeDrawer() {
      this.getIssuingCargoTransfer()
    },

    /**
     * 获取行信息
     */
    tableClick(row) {
      this.clickRow = row
      this.buttonList[0].disabled = false
    },
    /**
     * 获取船名航次
     */
    async getShipvoyage() {
      const res = await publicapi.getListShipvoyage()
      this.selectObject[0].selectData = res.data.data
    },
    /**
     * 获取船代货代
     */
    async getCustomer() {
      const res = await publicapi.getlistCustomer()
      this.customerData = res.data.data
      this.selectObject[2].selectData = res.data.data
    },
    handleSizeChange(val) {
      this.queryAll.pagesize = val
      this.getIssuingCargoTransfer()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getIssuingCargoTransfer()
    },
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData)
      this.getIssuingCargoTransfer()
    },

    handleClose(done) {
      const oldV = {}
      const newV = {}
      if (!Utils.compareData(oldV, newV)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      } else {
        done()
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";
.selectBox {
	justify-content: space-between;
	display: flex;
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-bottom: 0;
	border-left: none;
	height: 50px;
	position: relative;
	align-items: center;
	padding-left: 14px;
	padding-right: 20px;
}
.input_box {
	display: flex;
}
.page {
	background: #ffffff;
	text-align: right;
	border-radius: 0 0 4px 4px;
	padding: 5px 20px;
}
/deep/.el-tabs--border-card > .el-tabs__content {
	padding: 0 !important;
}
//抽屉底部样式
/deep/ .el-drawer__header {
	margin-bottom: 0;
	padding: 16px;
	border-bottom: 1px solid gainsboro;
}
.demo-drawer__footer {
	text-align: right;
	padding-right: 20px;
	border-top: 1px solid #c8cfde;
	background-color: #f5f7fa;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 50px;
}
.box {
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-radius: 4px 4px 0 0;
	border-top: none;
}
</style>
